var numWalkers;
var fr = 60;
var walkers = [];
var stage;
var hue;
var bgHue;
var shadow;
var origin;
var reset = true;


function setup() {
    // p5js treats setup() like a window.onload event
    // Create Stage
    stage = createVector(500, 500);
    createCanvas(stage.x, stage.y);
    frameRate(fr);

    // Setup walkers
    numWalkers = random(50, 200);

    // Set Background
    hue = random(0, 360);
    colorMode(HSB);
    background(hue, 90, 50);

    // Create Walkers
    for (i = 0; i < numWalkers; i++) {
        walkers[i] = new Walker();
    }

}

function resetCanvas() {
    clear();
}

function draw() {
    // Uncomment to see draw behavior
    // resetCanvas();
    if (mouseIsPressed) {
        if (reset) {
            clear();
            setup();
            reset = false;
        }
    } else {
        reset = true;
    }
    // Update Walker
    for (i = 0; i < numWalkers; i++) {
        walkers[i].display();
        walkers[i].update();
    }
}

function Walker() {
    // Set Properties
    this.pos = createVector(width / 2, height / 2);
    this.vel = createVector(0, 0);
    this.acc = createVector(random(random(-.05, .05), random(-.3, .3)), random(random(-.05, .05), random(-.3, .3)));
    this.decay = random(.5, 2); // Rate at which walkers shrink
    this.colorAngle = hue + random(-80, 80);
    this.sat = random(70, 80);
    this.light = random(60, 80);
    this.shadow = createVector(-this.acc.x, -this.acc.y);

    if (stage.x >= stage.y) {
        this.size = random(width * .02, width * .07);
        this.speed = random(width * .0032, width * .012);
    } else {
        this.size = random(height * .02, height * .07);
        this.speed = random(height * .0032, height * .012);
    }


    this.update = function() {

        var randomWalk = createVector(random(-this.speed, this.speed), random(-this.speed, this.speed));
        this.vel.add(this.acc.mult(1.005));
        this.pos.add(this.vel);
        this.pos.add(randomWalk);
        this.size -= this.decay;

        this.colorAngle += random(-.5, 1.5);
        if (this.colorAngle <= 0) {
            this.colorAngle += 360;
        } else if (this.colorAngle >= 360) {
            this.colorAngle -= 360;
        }

        this.light += .03;
        this.sat += .03;
    }

    this.display = function() {

        if (this.size <= 0) {
            return;
        } else {
            colorMode(HSB);

            //Shadow
            fill(this.colorAngle, this.sat, this.light);
            noStroke();
            ellipse(this.pos.x + this.shadow.x, this.pos.y + this.shadow.y, this.size, this.size);

            // Circle
            fill(this.colorAngle, this.sat, this.light);
            noStroke();
            ellipse(this.pos.x, this.pos.y, this.size, this.size);
        }
    }
}